<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>系统维护</title>
	<style type="text/css">
		html {
			width: 100%;
			height: 100%;
		}
		
		body.maintenance {
			width: 100%;
			height: 100%;
			background-color: #d0ecf9;
			background-image: url();
			background-repeat: no-repeat;
			background-position: center 35%;
		}
		
		.maintenance .container {
			position: relative;
			width: 630px;
			margin: 0 auto;
			top: 50%;
			/*TODO 宽小响应*/
			margin-top: -90px;
			text-align: center;
		}
		
		.maintenance .content {
			float: left;
			position: relative;
			width: 450px;
			text-align: left;
			font-family: '微软雅黑';
		}
		
		.maintenance .container h1 {
			color: #8a8989;
			font-size: 24px;
			font-weight: normal;
		}
		
		.maintenance .container p {
			margin-top: 30px;
			font-size: 14px;
			line-height: 24px;
			color: #8d8c8c;
		}
		
		.maintenance .container address {
			margin-top: 24px;
			font-size: 14px;
			color: #8d8c8c;
			line-height: 24px;
		}
		
		.maintenance .container address span {
			display: block;
			padding-left: 28px;
			background-image: url();
			background-repeat: no-repeat;
			background-position: 0 center
		}
		
		@keyframes airplane-shake {
			0% {
				transform: rotate(0deg)
			}
			10% {
				transform: rotate(10deg)
			}
			20% {
				transform: rotate(-10deg);
			}
			30% {
				transform: rotate(6deg);
			}
			40% {
				transform: rotate(-6deg);
			}
			50% {
				transform: rotate(2deg);
			}
			60% {
				transform: rotate(-2deg);
			}
			70% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(0deg);
			}
		}
		
		@keyframes -webkit-airplane-shake {
			0% {
				transform: rotate(0deg)
			}
			10% {
				transform: rotate(10deg)
			}
			20% {
				transform: rotate(-10deg);
			}
			30% {
				transform: rotate(6deg);
			}
			40% {
				transform: rotate(-6deg);
			}
			50% {
				transform: rotate(2deg);
			}
			60% {
				transform: rotate(-2deg);
			}
			70% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(0deg);
			}
		}
		
		@keyframes -moz-airplane-shake {
			0% {
				transform: rotate(0deg)
			}
			10% {
				transform: rotate(10deg)
			}
			20% {
				transform: rotate(-10deg);
			}
			30% {
				transform: rotate(6deg);
			}
			40% {
				transform: rotate(-6deg);
			}
			50% {
				transform: rotate(2deg);
			}
			60% {
				transform: rotate(-2deg);
			}
			70% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(0deg);
			}
		}
		
		@keyframes -o-airplane-shake {
			0% {
				transform: rotate(0deg)
			}
			10% {
				transform: rotate(10deg)
			}
			20% {
				transform: rotate(-10deg);
			}
			30% {
				transform: rotate(6deg);
			}
			40% {
				transform: rotate(-6deg);
			}
			50% {
				transform: rotate(2deg);
			}
			60% {
				transform: rotate(-2deg);
			}
			70% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(0deg);
			}
		}
		
		@keyframes -ms-airplane-shake {
			0% {
				transform: rotate(0deg)
			}
			10% {
				transform: rotate(10deg)
			}
			20% {
				transform: rotate(-10deg);
			}
			30% {
				transform: rotate(6deg);
			}
			40% {
				transform: rotate(-6deg);
			}
			50% {
				transform: rotate(2deg);
			}
			60% {
				transform: rotate(-2deg);
			}
			70% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(0deg);
			}
		}
		
		@keyframes oil-drop {
			0% {
				transform: translateY(0px);
				opacity: 1;
			}
			80% {
				transform: translateY(150px);
				opacity: 0;
			}
			100% {
				transform: translateY(150px);
			}
		}
		
		@keyframes -webkit-oil-drop {
			0% {
				transform: translateY(0px);
				opacity: 1;
			}
			80% {
				transform: translateY(150px);
				opacity: 0;
			}
			100% {
				transform: translateY(150px);
			}
		}
		
		@keyframes -moz-oil-drop {
			0% {
				transform: translateY(0px);
				opacity: 1;
			}
			80% {
				transform: translateY(150px);
				opacity: 0;
			}
			100% {
				transform: translateY(150px);
			}
		}
		
		@keyframes -o-oil-drop {
			0% {
				transform: translateY(0px);
				opacity: 1;
			}
			80% {
				transform: translateY(150px);
				opacity: 0;
			}
			100% {
				transform: translateY(150px);
			}
		}
		
				@keyframes -ms-oil-drop {
			0% {
				transform: translateY(0px);
				opacity: 1;
			}
			80% {
				transform: translateY(150px);
				opacity: 0;
			}
			100% {
				transform: translateY(150px);
			}
		}
		
		@keyframes oil-pool-fadein {
			0% {
				opacity: 0.0;
				transform: scale(0.9);
			}
			100% {
				opacity: 1.0;
				transform: scale(1);
			}
		}
		
		@keyframes -webkit-oil-pool-fadein {
			0% {
				opacity: 0.0;
				transform: scale(0.9);
			}
			100% {
				opacity: 1.0;
				transform: scale(1);
			}
		}
		
		@keyframes -moz-oil-pool-fadein {
			0% {
				opacity: 0.0;
				transform: scale(0.9);
			}
			100% {
				opacity: 1.0;
				transform: scale(1);
			}
		}
		
		@keyframes -o-oil-pool-fadein {
			0% {
				opacity: 0.0;
				transform: scale(0.9);
			}
			100% {
				opacity: 1.0;
				transform: scale(1);
			}
		}
				@keyframes -ms-oil-pool-fadein {
			0% {
				opacity: 0.0;
				transform: scale(0.9);
			}
			100% {
				opacity: 1.0;
				transform: scale(1);
			}
		}
		
		.maintenance .container .ani-airplane {
			float: left;
			margin-top: -110px;
		}
		
		.maintenance .container .ani-airplane .airplane {
			display: block;
			width: 172px;
			height: 133px;
			background-image: url();
			animation: airplane-shake 2.5s linear 0.5s infinite;
			-webkit-animation: airplane-shake 2.5s linear 0.5s infinite;
			-moz-animation: airplane-shake 2.5s linear 0.5s infinite;
			-o-animation: airplane-shake 2.5s linear 0.5s infinite;
			-ms-animation: airplane-shake 2.5s linear 0.5s infinite;
		}
		
		.maintenance .container .oil {
			display: block;
			margin-left: 81px;
			margin-top: -15px;
			width: 9px;
			height: 34px;
			background-image: url();
			animation: oil-drop 1s linear 1s infinite;
			-webkit-animation: oil-drop 1s linear 1s infinite;
			-moz-animation: oil-drop 1s linear 1s infinite;
			-o-animation: oil-drop 1s linear 1s infinite;
			-ms-animation: oil-drop 1s linear 1s infinite;
			opacity: 0;
		}
		
		.maintenance .container .oil-pool {
			display: block;
			width: 118px;
			height: 26px;
			margin-left: 30px;
			margin-top: 140px;
			background-image: url();
			animation: oil-pool-fadein 3s ease-in-out 1s forwards;
			-webkit-animation: oil-pool-fadein 3s ease-in-out 1s forwards;
			-moz-animation: oil-pool-fadein 3s ease-in-out 1s forwards;
			-o-animation: oil-pool-fadein 3s ease-in-out 1s forwards;
			-ms-animation: oil-pool-fadein 3s ease-in-out 1s forwards;
			opacity: 0;
		}
	</style>
</head>

<body class="maintenance">
	<div class="container clearfix">
		<div class="content">
			<h1>感谢您访问智慧教育云平台网站</h1>
			<p>很抱歉，由于后台系统正在进行维护，所以您暂时不能访问我们网站
				<br /> 预计网站将于10月27日00:00以后恢复正常访问，欢迎您届时光临。
			</p>
			<address>
   	    		<span>有关业务咨询，请联系瓯海教育局：0577-82355615</span>
   	    		<span>有关技术问题，请联系掌网科技有限公司：0577-88111667</span>
   	  </address>
		</div>
		<div class="ani-airplane">
			<span class="airplane"></span>
			<span class="oil"></span>
			<span class="oil-pool"></span>
		</div>
	</div>
</body>

</html>